<template>
  <div id="hello">
    <div id="header">
      <router-link to="/dynamic-column" active-class="active-router">动态切换列</router-link>
      <router-link to="/remote" active-class="active-router">远程数据</router-link>
      <router-link to="/local" active-class="active-router">本地数据</router-link>
      <router-link to="/local2" active-class="active-router">本地数据(点击选中行)</router-link>
      <router-link to="/non-pagination" active-class="active-router">不分页</router-link>
      <router-link to="/custom-footer" active-class="active-router">自定义footer挂载位置</router-link>
    </div>
    <div id="content">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#hello {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#header {
  width: 100%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  flex: 0 0 auto;;
  height: 50px;

  a {
    padding: 5px 10px;
  }
}

#content {
  flex: 1 1 auto;
  overflow: auto;
}
</style>
<style lang="less">
.customize-row-class {
  border: 1px solid green;

  &:hover {
    color: #5daf34;
  }

  &.current-row {
    color: orangered;
  }
}

.active-router {
  color: #000;
  cursor: default;
  text-decoration: none;
}
</style>
